<template>
	<div class="storedetail-wrap">
    <div v-title style="display: none">门店详情</div>
    <div class="storedetail-img">
      <img :src="'http://cj.lightway.cc/media/' + this.storedetail.banner"/>
    </div>
    <div class="storedetail-address">
      <headline headline="门店地址"></headline>
      <p>{{ this.storedetail.address }}<span @click="tomap">查看地图</span></p>
    </div>
    <div class="storedetail-tel">
      <headline headline="联系方式"></headline>
      <a :href="'tel:' + this.storedetail.phone">{{ this.storedetail.phone }}</a>
    </div>
    <div class="question-wrap" :class="classA">
      <span class="icon" :class="classB"></span>
      <span class="wenhao" @click="showDetail"></span>
        <div class="info-lift" :class="classC">
          <li v-for="(item,index) in infoList"><router-link to="/classDetail">{{item.name}}</router-link></li>
        </div>
        <div class="triangle-topleft" :class="classD">
        </div>
    </div>
	</div>
</template>
<script type="text/ecmascript-6">
const ERR_OK = 1;
import headline from 'components/headline/headline';
  export default {
    props: {
    },
    data() {
      return {
        classA: '',
        classB: '',
        classC: '',
        classD: '',
        infoList: [],
        storedetail: []
      };
    },
    created() {
      let id = this.$route.params.id;
      this.$http.get('api/school/store/detail/?store_id=' + id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.storedetail = response.data[0];
        }
      });
      this.$http.get('/api/infoList').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.infoList = response.data;
        }
      });
    },
    methods: {
       showDetail() {
        if (this.classA === 'background-grey') {
          this.classA = '';
          this.classB = '';
          this.classC = '';
          this.classD = '';
        } else {
          this.classA = 'background-grey';
          this.classB = 'icon-trans';
          this.classC = this.classD = 'fade-enter';
        }
      },
      tomap() {
        this.$router.push({path: '/BMapComponent/', query: {x: this.storedetail.x_coordinate, y: this.storedetail.y_coordinate}});
      }
    },
    components: {
      headline
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"

  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰白 bg 
  主题 红 theme
  辅助 蓝 assist
  背景 白 bg-white */
  
.storedetail-wrap
  font-family PingFangSC-Regular
  .storedetail-img
    img
      width 100%
      height auto
  .storedetail-address
    height 76px
    background-color rgb(255,255,255)
    margin-top 10px
    border-top-1px($border)
    border-1px($border)
    p
      font-size 15px
      padding-left 30px
      margin-top 5px
      color $se-fn
      span
        color rgb(87,107,149)
        margin-left 10px
  .storedetail-tel
    height 76px
    background-color rgb(255,255,255)
    margin-top 10px
    border-top-1px($border)
    border-1px($border)
    a
      font-size 15px
      padding-left 30px
      margin-top 5px
      color rgb(87,107,149)
      -webkit-tap-highlight-color rgba(0,0,0,0)
</style>